<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tencent Cloud CodeBuddy - AI编程助手</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
        }
        .section-title {
            position: relative;
            padding-bottom: 1rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight">
                    <i class="fas fa-code mr-4"></i>Tencent Cloud CodeBuddy
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">基于混合大模型的AI编程工具，让编码更智能、更高效</p>
                <div class="flex justify-center space-x-4">
                    <a href="https://copilot.tencent.com/ide/" target="_blank" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300">
                        <i class="fas fa-rocket mr-2"></i>立即体验
                    </a>
                    <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition duration-300">
                        <i class="fas fa-play-circle mr-2"></i>观看演示
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-6 py-12">
        <!-- Introduction -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-12 card-hover">
            <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                Tencent Cloud CodeBuddy 是一个基于混合大模型的AI编程工具，旨在提升开发者的编码效率，服务于个人开发者、团队和企业用户。它通过智能代码补全、诊断和优化等功能，帮助程序员更快、更高质量地完成开发任务。
            </p>
            <div class="mt-6 p-4 bg-purple-50 rounded-lg">
                <p class="text-purple-700 font-medium">
                    <i class="fas fa-link mr-2"></i>官方网址：
                    <a href="https://copilot.tencent.com/ide/" target="_blank" class="underline hover:text-purple-900">https://copilot.tencent.com/ide/</a>
                </p>
            </div>
        </section>

        <!-- Problem Solving -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 section-title">它能解决什么问题</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl p-6 shadow-lg card-hover">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">效率低下</h3>
                    <p class="text-gray-600">重复性代码编写耗时，降低开发效率</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg card-hover">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-bug"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">调试困难</h3>
                    <p class="text-gray-600">调试复杂代码时难以快速定位问题</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg card-hover">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">缺乏支持</h3>
                    <p class="text-gray-600">缺乏即时技术支持，需频繁查阅文档或搜索解决方案</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg card-hover">
                    <div class="text-4xl mb-4 feature-icon">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">质量不一</h3>
                    <p class="text-gray-600">跨语言或框架开发时，代码质量和一致性难以保证</p>
                </div>
            </div>
            <div class="mt-8 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-6">
                <p class="text-lg text-gray-700">
                    <i class="fas fa-lightbulb text-purple-600 mr-2"></i>
                    Tencent Cloud CodeBuddy 利用AI技术提供实时代码建议、错误检测和优化方案，让开发者专注于核心逻辑而非琐碎细节。
                </p>
            </div>
        </section>

        <!-- Core Features -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 section-title">核心功能概述</h2>
            <div class="space-y-4">
                <div class="bg-white rounded-xl p-6 shadow-lg flex items-start card-hover">
                    <div class="text-3xl mr-4 text-purple-600 mt-1">
                        <i class="fas fa-keyboard"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2 text-gray-800">代码补全</h3>
                        <p class="text-gray-600">根据上下文生成准确的代码片段，减少手动输入，支持Python、Java、C++等20多种语言。</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg flex items-start card-hover">
                    <div class="text-3xl mr-4 text-purple-600 mt-1">
                        <i class="fas fa-stethoscope"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2 text-gray-800">代码诊断与优化</h3>
                        <p class="text-gray-600">自动检测潜在错误并提出改进建议，提升代码可读性和性能。</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg flex items-start card-hover">
                    <div class="text-3xl mr-4 text-purple-600 mt-1">
                        <i class="fas fa-comments"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2 text-gray-800">技术对话</h3>
                        <p class="text-gray-600">通过自然语言交互解答编程问题，提供技术建议或参考文档。</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg flex items-start card-hover">
                    <div class="text-3xl mr-4 text-purple-600 mt-1">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2 text-gray-800">多IDE兼容</h3>
                        <p class="text-gray-600">支持Visual Studio Code、JetBrains IDEs、Visual Studio等主流开发环境，适配性强。</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-lg flex items-start card-hover">
                    <div class="text-3xl mr-4 text-purple-600 mt-1">
                        <i class="fas fa-database"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2 text-gray-800">知识库集成</h3>
                        <p class="text-gray-600">结合腾讯云的AI能力，可根据项目需求提供个性化代码推荐。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization -->
        <section class="mb-12 bg-white rounded-2xl shadow-xl p-8">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 section-title">功能架构图</h2>
            <div class="mermaid">
                graph TD
                    A[CodeBuddy AI编程助手] --> B[智能代码补全]
                    A --> C[代码诊断优化]
                    A --> D[技术对话支持]
                    A --> E[多IDE兼容]
                    A --> F[知识库集成]
                    
                    B --> B1[20+编程语言]
                    B --> B2[上下文感知]
                    B --> B3[实时建议]
                    
                    C --> C1[错误检测]
                    C --> C2[性能优化]
                    C --> C3[代码重构]
                    
                    D --> D1[自然语言交互]
                    D --> D2[技术文档]
                    D --> D3[解决方案]
                    
                    E --> E1[VS Code]
                    E --> E2[JetBrains]
                    E --> E3[Visual Studio]
                    
                    F --> F1[腾讯云AI]
                    F --> F2[个性化推荐]
                    F --> F3[项目定制]
                    
                    style A fill:#667eea,stroke:#764ba2,stroke-width:3px,color:#fff
                    style B fill:#f3e5f5,stroke:#9c27b0
                    style C fill:#e8f5e9,stroke:#4caf50
                    style D fill:#e3f2fd,stroke:#2196f3
                    style E fill:#fff3e0,stroke:#ff9800
                    style F fill:#fce4ec,stroke:#e91e63
            </div>
        </section>

        <!-- Use Cases -->
        <section class="mb-12">
            <h2 class="text-3xl font-bold mb-6 text-gray-800 section-title">使用场景</h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl p-6 card-hover">
                    <div class="text-4xl mb-4 text-purple-700">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">快速原型开发</h3>
                    <p class="text-gray-700">一位初创公司的前端开发者需快速构建Vue.js应用。CodeBuddy可生成组件代码、自动补全CSS样式，节省50%以上的编码时间。</p>
                </div>
                <div class="bg-gradient-to-br from-blue-100 to-cyan-100 rounded-xl p-6 card-hover">
                    